<!-- 左侧折叠文件list -->
<template>
    <div class="list-tree">
        <div class="title" @click="treeData.isOpen=!treeData.isOpen">
            <div class="title-icon">
                <i :class="treeData.isOpen?'el-icon-plus':'el-icon-minus'" class="fs13 fw"></i>
            </div>
            <div class="ml10">{{treeData.name}}</div>
        </div>
        <div class="group-cont" v-show="!treeData.isOpen&&treeData.childList.length!=0">
            <div 
                class="group-list"
                v-for="(items,idxs) in treeData.childList"
                :key="idxs"
            >
                <div class="group-tit" @click="noChildChange(items)" :class="{'active':items.isOpen&&items.childList.length==0}">
                    <i class="ctheme fw fs14 mt2" :class="items.childList.length==0?'':!items.isOpen?'el-icon-plus':'el-icon-minus'" v-if="isIcon"></i>
                    <!-- <span :class="isIcon?'ml15':'ml30'">{{items.name}}</span> -->
                    <span :class="items.childList.length==0||!isIcon?'ml30':'ml15'">{{items.name}}</span>
                    <span class="ml10" v-if="!isHighSearch&&items.number">({{items.number}})</span>
                </div>
                <ul class="group-list-child" v-show="items.isOpen">
                    <li 
                       v-for="(item,idx) in items.childList"
                       :key="idx"
                       :class="{'active':item.isOpen}"
                       @click="cateTreeChange(item)"
                    >
                        <span>{{item.name}}</span>
                        <span class="ml10" v-if="!isHighSearch&&item.number!=null">({{item.number}})</span>
                    </li>
                </ul>
            </div>
        </div>
         
    </div>
</template>

<script>
export default {
    name: "xszkListTree",
    props:{
        treeData:{
            type:Object,
            default:()=>{}
        },
        isHighSearch:{
            type:Boolean,
            default:false,
        },
        isSearchNull:{
            type:Boolean,
            default:false,
        },
        isIcon:{
            type:Boolean,
            default:true,
        }
    },
    computed: {
       
    },
    data() {
        return {
            isOpen:false,
        };

    },
    methods: {
        noChildChange(items){
            items.isOpen=!items.isOpen;
            if(items.childList.length==0){
                this.$emit("noChildChange",items);
            }
        },
        cateTreeChange(item){
            this.$emit("cateTreeChange",item);
        }
 
       

    },
    created() {
        
    },
    watch:{
        
        
    }

};
</script>

<style lang="stylus" scoped>
.list-tree
    width 240px
    height auto
    background #FFFFFF
    border-radius 4px
    margin-bottom 15px
    .title
        width 100%
        height 50px
        display flex
        align-items center
        padding 0 10px
        border-bottom 1px solid #ddd
        font-size 16px
        color #4A4A4A
        cursor pointer
        .title-icon
            width 18px
            height 18px
            text-align center
            line-height 18px
            color #fff
            background #3266CC
            border-radius 4px
    .group-cont
        padding 10px 12px
        .group-list
            margin-bottom 20px
            overflow hidden
        .group-list:last-child
            margin-bottom 0
        .group-tit
            display flex
            align-items center
            font-size 15px
            cursor pointer
            transition all 0.2s
            &:hover,&.active
                color #3266CC
        .group-list-child li
            width 100%
            margin-top 20px
            font-size 15px
            color #4A4A4A
            padding-left 55px
            padding-right 15px
            cursor pointer
            transition all 0.2s
            &:hover,&.active
                color #3266CC
            
</style>

